<template>
  <view>
    <scroll-view
      class="tabs"
      :style="{ height }"
      scroll-x
      :scroll-into-view="scrollIntoView"
      :enable-flex="true"
      scroll-with-animation
      scroll-anchoring
      :enhanced="true"
      :show-scrollbar="false"
    >
      <view style="display: flex; width: 100%; height: 100%">
        <view
          class="tab-item disFlxCC"
          v-for="(v, i) in tabs"
          :class="{ 'nav-active': checkVal(v), 'nav-capsule': navType === NavTypeEnum.capsule }"
          :style="{
            flex: navType === NavTypeEnum.ordinary && tabItemFlex,
            backgroundColor: checkVal(v) ? activeBackgroundColor : backgroundColor,
          }"
          :id="`nav_${getVal(v)}`"
          :key="getVal(v)"
          @click="onItem(v, i)"
        >
          <view
            class="tab-name"
            :style="{
              color: checkVal(v) ? tabNameActiveColor : v.disabled ? '#aaa' : '#333',
              fontSize: checkVal(v) ? tabActiveFontSize : '28rpx',
            }"
          >
            <text>{{ v.name }}</text>
            <view v-if="v.unread" class="unread-badge">{{ v.unread > 99 ? '99+' : v.unread }}</view>
          </view>
          <view
            v-if="navType === NavTypeEnum.ordinary"
            class="tab-bar"
            :style="{ backgroundColor: tabBarColor }"
          ></view>
        </view>
      </view>
    </scroll-view>

    <slot name="icon" />
  </view>
</template>

<script lang="ts" setup>
  import { inject, ref, type Ref, unref, watch, type PropType, computed } from 'vue';
  import { propTypes } from '@/utils/propTypes';
  import { NavTypeEnum, type TabsItem } from './types';

  defineProps({
    height: propTypes.string.def('76rpx'),
    tabBarColor: propTypes.string.def('#3648ef'),
    backgroundColor: propTypes.string,
    activeBackgroundColor: propTypes.string,
    tabNameActiveColor: propTypes.string.def('#333333'),
    tabActiveFontSize: propTypes.string.def('28rpx'),
    tabItemFlex: propTypes.number.def(1),
    navType: {
      type: String as PropType<keyof typeof NavTypeEnum>,
      default: NavTypeEnum.ordinary,
    },
  });

  const emits = defineEmits(['onItem']);

  const tabsRef = inject('tab_list') as Ref<TabsItem[]>;
  const index = inject('tab_index') as Ref<string | number>;
  const tabs = ref<TabsItem[]>([]);

  const scrollIntoView = ref('');

  watch(tabsRef.value, (val) => {
    const list = [];
    for (let i = 0; i < val.length; i++) {
      const item = val[i];
      list.push(unref(item));
    }
    tabs.value = list;
  });

  const getVal = (item: TabsItem) => (item.value !== null ? item.value : item.name);
  const checkVal = (item: TabsItem) => index.value == item.name || index.value == item.value;

  function onItem(item: TabsItem, i: number) {
    if (item.disabled) return;
    if (i <= 1) i = 1;
    const lastItem = tabs.value[i - 1];
    const intoViewId = getVal(lastItem);
    scrollIntoView.value = `nav_${intoViewId}`;
    index.value = getVal(item);
    emits('onItem', item);
  }
</script>
<style lang="scss" scoped>
  .tabs {
    display: flex;
    position: relative;
    .tab-item {
      padding: 0 24rpx;
      white-space: nowrap;
      height: 100%;
      position: relative;
      .tab-name {
        flex-shrink: 0;
        font-size: 28rpx;
        position: relative;
        .unread-badge {
          position: absolute;
          right: 0rpx;
          top: -40%;
          transform: translateX(90%);
          font-size: 24rpx;
          padding: 0 8rpx;
          min-width: 44rpx;
          height: 44rpx;
          line-height: 44rpx;
          text-align: center;
          color: #ffffff;
          border-radius: 24rpx;
          background-color: #ea5e0e;
          box-sizing: border-box;
          box-shadow: 2rpx 2rpx 2rpx 0px rgba(0, 0, 0, 0.2);
        }
      }
      .tab-bar {
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 80rpx;
        height: 4rpx;
        transform: scale(0) translateX(-50%);
        transition: all 250ms;
        background-color: transparent;
      }
    }
    .nav-active {
      .tab-name {
        color: #000000;
        font-weight: 700;
      }
      .tab-bar {
        transform: scale(1) translateX(-50%);
        background-color: #3648ef;
      }
    }

    .nav-capsule {
      margin: 0 8rpx;
      border-radius: 44rpx;
    }
  }
</style>
